<template>
  <div class="myheader">
    <div class="h-left">
      <h2>UNI-ADMIN</h2>
    </div>
    <div class="h-center">
      <topnav :topdata="topdata"></topnav>
    </div>
    <div class="h-right" @mouseenter.stop="showdom">
      <div>
        <span
          style="
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #ccc;
            border-radius: 50%;
          "
        ></span>
        <span>{{ $store.state.user.username }}</span>
        <span>&or;</span>
      </div>
      <div class="msck" :class="showdom1 ? 'msck-hover' : 'msck'"  @mouseleave.stop="hidedom">
        <p>修改</p>
        <p @click="logout">退出</p>
      </div>
    </div>
  </div>
</template>

<script>
import topnav from "@/components/topnav/topnav";

export default {
  components: { topnav },
  data() {
    return {
      showdom1: false,
      
      topdata: [
        {
          content: "首页",
          currentpath: "/home",
        },
        {
          content: "商品",
          currentpath: "/goods",
        },
        {
          content: "订单",
          currentpath: "/oder",
        },
        {
          content: "会员",
          currentpath: "/member",
        },
        {
          content: "设置",
          currentpath: "/myset",
        },
      ],
    };
  },
  methods: {
    showdom() {
      this.showdom1 = true;
    },
    hidedom() {
      this.showdom1 = false;  
    },
    logout(){
      this.$store.commit('userchange',{type:'logout'});
      this.$router.push('/login')
    }
  },
};
</script>

<style lang="scss" scoped>
.myheader {
  width: 100%;
  height: 50px;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  .h-left {
    flex: 7;
    h2 {
      text-align: left;
      padding: 0 10px;
    }
  }
  .h-center {
    flex: 5;
    height: 100%;
    /deep/.topnav {
      height: 100%;
      ul {
        height: 100%;
        li {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .router-link-exact-active {
          color: goldenrod;
          border-bottom: 2px solid goldenrod;
        }
      }
    }
  }
  .h-right {
    flex: 1.5;
    height: 100%;
    position: relative;
    div {
      height: 100%;
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
        cursor: pointer;
      }
    }

    .msck {
      width: 100%;
      background-color: rgb(126, 125, 125);
      display: flex;
      flex-direction: column;
      position: absolute;
      bottom: 0;
      z-index: -10;
      // transform: translateY(-50px);
      transition: 0.5s linear;
      p {
        color: #fff;
        cursor: pointer;
      }
    }
    .msck-hover {
      width: 100%;
      background-color: rgb(126, 125, 125);
      display: flex;
      flex-direction: column;
      position: absolute;
      transform: translateY(50px);
      z-index: 10;
      transition: 0.5s linear;
      p {
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>